<template>
  <view class="pages">
    <view class="top">
      <u-navbar title="一键告警" :is-back="false" title-color="#fff" back-icon-color="#ffffff" :autoBack="false" background="none"
                :border-bottom="false"/>
    </view>
    <view class="upLoad">
      <u-subsection activeColor="#2979FF" mode="subsection" :list="['图片上传','视频上传']" :current="nav"
                    @change="(e)=>nav=e"></u-subsection>

      <u-upload :custom-btn="true" class="btnUpload"
                :fileList="fileList2"
                multiple
                name="6">
        <view slot="addBtn" class="btn">
          <!--          <u-icon name="camera" size="80"/>-->
          <u-image width="70px" height="70px" v-if="nav===0" src="@/static/image/upimg.svg"/>
          <u-image width="70px" height="70px" v-else src="@/static/image/upauto.svg"/>
          <view>{{ nav === 0 ? '上传图片' : '上传视频' }}</view>
        </view>
      </u-upload>

    </view>
    <view class="btn">
      <view class="msg" v-if="nav===1">
        <u-icon name="error-circle-fill" size="26"/>
        <span>温馨提示:视频限制时长2分钟</span>
      </view>
      <view class="address">
        <u-icon name="map-fill" size="36"/>
        <span>位置信息：湖北省武汉市</span>
      </view>
      <view class="btnInput">
        <span>备注</span>
        <u-input/>
      </view>
    </view>
    <u-button style="width: calc(100% - 20px);padding: 0 10px;position:fixed;bottom: 70px;margin-left: 10px"
              shape="circle" type="primary">确定上报
    </u-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nav: 0,
      fileList2: []
    };
  }
}
</script>

<style scoped lang="scss">
/deep/ body, uni-page-body {
  background-color: #F9F9F9;
  height: 100%;
}

.pages {
  display: flex;
  flex-direction: column;
  position: relative;

  .top {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-image: linear-gradient(to top right, #004EEA, #2A78FF);
  }

  .upLoad {
    display: flex;
    flex-direction: column;
    padding: 10px;

    .btnUpload {
      display: flex;
      flex-direction: column;
      width: 100%;
      background-color: #f4f5f6;
      margin-top: 10px;
      border: 1px dotted #909399;
      border-radius: 6px;

      .btn {
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 130px;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .btn {
    display: flex;
    flex-direction: column;
    padding: 0 10px;

    .msg {
      display: flex;
      flex-direction: row;
      align-items: center;
      color: #DF4444;

      span {
        margin-left: 5px;
      }
    }

    .address {
      display: flex;
      flex-direction: row;
      align-items: center;
      color: #FAA353;
      background-color: #FFFDF0;
      padding: 2px 10px;
      border: 1px solid #FAA353;
      margin-top: 10px;

      span {
        margin-left: 5px;
      }
    }

    .btnInput {
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid #EBEEF5;

      span {
        color: #909399;
        margin-right: 10px;
      }
    }
  }
}
</style>
